<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/10
  Time: 17:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
        <script src="${path}/resources/dist/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
        <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
        <style>
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }

            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template>
                <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>游戏管理</el-breadcrumb-item>
                </el-breadcrumb>
                <div>
                    <el-form :inline="true" :model="gameSelect" class="user-search">
                        <el-form-item label="搜索：">
                            <el-input size="small" v-model="gameSelect.gname" placeholder="输入游戏名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                            <el-button size="small" type="primary" icon="el-icon-plus" @click="addFlag = true">添加
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="gameList" stripe border>
                        <el-table-column prop="gname" label="名称" width=120></el-table-column>
                        <el-table-column prop="title" label="标题" width=400></el-table-column>
                        <el-table-column prop="size" label="大小(M)" width=120></el-table-column>
                        <el-table-column prop="downloadCount" label="下载量" width=120></el-table-column>
                        <el-table-column prop="gstatus" label="状态" width=80>
                            <template slot-scope="scope">
                                <el-tag
                                        effect="dark">
                                    {{scope.row.gstatus == 0?"未启用":""}}
                                    {{scope.row.gstatus == 1?"启用":""}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="typeName" label="分类" width=120>
                        </el-table-column>

                        <el-table-column prop="platform" label="平台类型" width=120>
                            <template slot-scope="scope">
                                {{scope.row.platform == 1?"All":""}}
                                {{scope.row.platform == 2?"Android":""}}
                                {{scope.row.platform == 3?"Ios":""}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="recType" label="推荐类型" width=120>
                            <template slot-scope="scope">
                                {{scope.row.recType == 0?"普通":""}}
                                {{scope.row.recType == 1?"最新":""}}
                                {{scope.row.recType == 2?"精选":""}}
                                {{scope.row.recType == 3?"首页推荐":""}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150px">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle
                                           @click="editGame(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle
                                           @click="deletethisGame(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <%--分页查询--%>
                    <el-pagination background @current-change="currentChange" @size-change="sizeChange"
                                   layout="sizes, prev, pager, next, jumper"
                                   :page-sizes="[3, 6, 9]" :total="pageInfo.total" :page-size="pageInfo.pageNum"
                                   :current-page="pageInfo.page"></el-pagination>
                    <%--修改游戏--%>
                    <el-dialog title="修改游戏" :visible.sync="updateFlag" :before-close="handleClose">
                        <el-form label-width="80px" :model="updateGameList">

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏名字">
                                        <el-input type="text" v-model="updateGameList.gname"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏标题">
                                        <el-input type="text" v-model="updateGameList.title"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏大小">
                                        <el-input text="text" v-model="updateGameList.size"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏描述">
                                        <el-input type="text" v-model="updateGameList.des"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏图标">
                                        <el-input type="text" v-model="updateGameList.gameIcon"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="Ios">
                                        <el-input type="text" v-model="updateGameList.iosUrl"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="Android">
                                        <el-input type="text" v-model="updateGameList.androidUrl"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏状态">
                                        <template>
                                            <el-select v-model="updateGameList.gstatus" placeholder="请选择">
                                                <el-option label="未启用" :value=0></el-option>
                                                <el-option label="启用" :value=1></el-option>
                                            </el-select>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="游戏类型">
                                        <template>
                                            <el-select v-model="updateGameList.tid" placeholder="请选择">
                                                <el-option v-for="item in gameType"
                                                           :label="item.typeName"
                                                           :value="item.typeId">
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="推荐类型">
                                        <template>
                                            <el-select v-model="updateGameList.rexType" placeholder="请选择">
                                                <el-option label="首页推荐" value=0></el-option>
                                                <el-option label="精选" :value=1></el-option>
                                                <el-option label="最新" :alue=2></el-option>
                                                <el-option label="普通" :value=3></el-option>
                                            </el-select>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10" :offset="3">
                                    <el-form-item label="平台类型">
                                        <template>
                                            <el-select v-model="updateGameList.platform" placeholder="请选择">
                                                <el-option label="ALL" :value=0></el-option>
                                                <el-option label="Android" :value=1></el-option>
                                                <el-option label="IOS" :value=2></el-option>
                                            </el-select>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <span>
                    <el-button @click="updateFlag = false">关闭</el-button>
                    <el-button @click="updateGame">提交</el-button>
                </span>
                    </el-dialog>
                    <%--删除该游戏--%>
                    <el-dialog title="删除游戏" :visible.sync="deleteFlag" :before-close="handleClose">
                    <span>
                    <el-button @click=" deleteFlag = false">取消</el-button>
                    <el-button @click="deteleGame">确定删除</el-button>
                     </span>
                    </el-dialog>
                    <%--添加游戏--%>
                    <el-dialog title="添加游戏" :visible.sync="addFlag" :before-close="handleClose">
                        <el-form :label-position="labelPosition" label-width="80px" :model="addGamelist">
                            <el-form-item label="游戏名称">
                                <el-input v-model="addGamelist.gname" style="width: 455px;"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏标题">
                                <el-input v-model="addGamelist.title" style="width: 455px;"></el-input>
                            </el-form-item>
                            <el-form-item label="游戏大小">
                                <el-input v-model="addGamelist.size" style="width: 455px;"></el-input>
                            </el-form-item>
                            <el-form-item label="图标" :label-width="formLabelWidth">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/fileUpdateLoad.do"
                                        :show-file-list="false"
                                        :on-success="successFileUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="详情图片" :label-width="formLabelWidth">
                                <el-upload
                                        class="avatar-uploader"
                                        action="/fileUpdateLoad.do"
                                        :show-file-list="false"
                                        :on-success="successUpload">
                                    <img v-if="pricturesUrl" :src="pricturesUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item label="IOS">
                                <el-select v-model="addGamelist.iosUrl" placeholder="IOS下载地址" style="width:155px;">
                                    <el-option v-for="item in iosurllist"
                                               :label="item.iosUrl"
                                               :value="item.iosUrl">
                                    </el-option>
                                </el-select>
                                <el-input v-model="addGamelist.iosUrl" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="Android">
                                <el-select v-model="addGamelist.androidUrl" placeholder="Android下载地址"
                                           style="width:155px;">
                                    <el-option v-for="item in Androidurllist"
                                               :label="item.androidUrl"
                                               :value="item.androidUrl">
                                    </el-option>
                                </el-select>
                                <el-input v-model="addGamelist.androidUrl" style="width: 300px;"></el-input>
                            </el-form-item>


                            <el-form-item label="推荐类型">
                                <el-select v-model="addGamelist.rectype" placeholder="推荐类型" style="width:455px;">
                                    <el-option label="首页推荐" :value=0></el-option>
                                    <el-option label="精选" :value=1></el-option>
                                    <el-option label="最新" :value=2></el-option>
                                    <el-option label="普通" :value=3></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="状态">
                                <el-select v-model="addGamelist.gsatus" placeholder="状态" style="width:455px;">
                                    <el-option label="未启用" :value=0></el-option>
                                    <el-option label="启用" :value=1></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="游戏分类">
                                <el-select v-model="addGamelist.tid" placeholder="游戏类型" style="width:455px;">
                                    <el-option v-for="item in gameType"
                                               :label="item.typeName"
                                               :value="item.typeId">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="平台类型">
                                <el-select v-model="addGamelist.platform" placeholder="平台类型" style="width:455px;">
                                    <el-option label="ALL" :value=1></el-option>
                                    <el-option label="Android" :value=2></el-option>
                                    <el-option label="IOS" :value=3></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="游戏描述">
                                <el-input v-model="addGamelist.des" type="textarea" style="width: 455px;"></el-input>
                            </el-form-item>
                            <el-button type="primary" round @click="addGame">保存</el-button>
                        </el-form>
                        <span>
                    <el-button @click=" addFlag = false">取消</el-button>
                    <el-button @click="addGame">保存</el-button>
                </span>
                    </el-dialog>
                </div>
            </template>
        </div>
    </body>
    <script type="text/javascript">

        const vm = new Vue({
            el: "#app",
            data: {
                gameList: [],
                gameType: [],
                iosurllist: [],
                Androidurllist: [],
                gameType: [],
                updateFlag: false,
                deleteFlag: false,
                addFlag: false,
                gameSelect: {// 查询参数，搜索时的条件
                    gname: "", // 游戏名称
                    method: "showAllGame",
                    nowPage: 1,
                    pageSize: 3
                },
                pageInfo: {
                    nowPage: 1,
                    pageSize: 2,
                    total: 3
                },
                addGamelist: {
                    gname: "",
                    title: "",
                    downloadCount: 1,
                    size: 1,
                    des: "",
                    gameIcon: "",
                    iosUrl: "",
                    androidUrl: "",
                    prictures: "",
                    gstatus: 1,
                    tid: 1,
                    recType: 1,
                    platform: 1,
                },
                updateGameList: {
                    gid: 1,
                    gname: "",
                    title: "",
                    downloadCount: 1,
                    size: 1,
                    des: "",
                    gameIcon: "",
                    iosUrl: "",
                    androidUrl: "",
                    prictures: "",
                    gstatus: '',
                    tid: '',
                    recType: '',
                    platform: '',
                },
                detele: {
                    gid: "",
                }
            },
            methods: {
                editGame(row) {
                    this.updateFlag = true;
                    this.updateGameList = {
                        gid: row.gid,
                        gname: row.gname,
                        title: row.title,
                        size: row.size,
                        des: row.des,
                        gameIcon: row.gameIcon,
                        iosUrl: row.iosUrl,
                        androidUrl: row.androidUrl,
                        prictures: row.prictures,
                        gstatus: row.gstatus,
                        tid: row.tid,
                        recType: row.recType,
                        platform: row.platform
                    }
                },
                updateGame() {
                    let vm = this;
                    var data = window.Qs.stringify(this.updateGameList);
                    axios({
                        url: "/game.do",
                        method: "post",
                        data: "method=updateGame&" + data
                    }).then(function (response) {
                        if (response.data == "修改成功") {
                            vm.updateFlag = false;
                            vm.showGame()
                        }
                    })
                },
                deletethisGame(row) {
                    this.deleteFlag = true;
                    this.detele = {
                        gid: row.gid
                    }
                },
                deteleGame() {
                    let vm = this;
                    var data = window.Qs.stringify(this.detele);
                    axios({
                        url: "/game.do",
                        method: "post",
                        data: "method=deleteGame&" + data
                    }).then(function (response) {
                        if (response.data == "删除成功") {
                            alert("删除成功")
                            vm.deleteFlag = false
                            vm.search()
                        }
                    })
                },
                search() {
                    var data = window.Qs.stringify(this.gameSelect);
                    var vm = this
                    axios.post("/game.do", data).then(response => {
                        vm.gameList = response.data.dataList;
                        vm.pageInfo = {
                            pageSize: response.data.pageNum,// 每页显示的数据量
                            nowPage: response.data.nowPage, // 当前页
                            total: response.data.totalNum // 总条数
                        };
                    })
                    ;
                },
                currentChange(val) {// 当前页发生变化时触发的事件
                    this.gameSelect.nowPage = val;
                    this.search();
                }, sizeChange(val) {// 每页显示的数据量变化时触发的事件
                    this.gameSelect.pageSize = val;
                    this.search();
                },
                addGame() {
                    let vm = this;
                    var data = window.Qs.stringify(this.addGamelist);
                    axios({
                        url: "/game.do",
                        method: "post",
                        data: "method=addGame&" + data,
                    }).then(function (response) {
                        if (response.data == "添加成功") {
                            alert("添加成功")
                            vm.addFlag = false;
                            vm.search()
                        }
                    })
                },
                successFileUpload(response, file, fileList) {// 文件上传成功
                    this.imageUrl = URL.createObjectURL(file.raw);
                    console.log(response)
                    this.addGamelist.gameIcon = response;
                },
                successUpload(response, file, fileList) {
                    this.pricturesUrl = URL.createObjectURL(file.raw);
                    this.addGamelist.prictures = response
                },
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {
                        });
                },
            },
            mounted() {
                this.search();
                // let vm = this;
                // axios({
                //     url: "/game.do",
                //     method: "post",
                //     data: "method=showAllGame&nowPage=" + this.page.nowPage + "&pageNum=" + this.page.pageNum
                // }).then(function (response) {
                //     vm.gameList = response.data.dataList;
                //     vm.page = {
                //         nowPage: response.data.nowPage,
                //         pageNum: response.data.pageNum,
                //         totalNum: response.data.totalNum
                //     }
                // })
                axios({
                    url: "/type.do",
                    method: "post",
                    data: "method=gameType"
                }).then(function (response) {
                    vm.gameType = response.data
                })
                let vm = this;
                axios({
                    url: "/type.do",
                    method: "post",
                    data: "method=gameType"
                }).then(function (response) {
                    vm.gameType = response.data;
                })
                axios({
                    url: "/game.do",
                    method: "post",
                    data: "method=iosurlList"
                }).then(function (response) {
                    vm.iosurllist = response.data
                })
                axios({
                    url: "/game.do",
                    method: "post",
                    data: "method=androidurlList"
                }).then(function (response) {
                    vm.Androidurllist = response.data
                })
            }

        })
    </script>
</html>
